<template>
    <div class="bottom">
        <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to='/home' >主页</van-tabbar-item>
            
          <van-tabbar-item icon="cart-o" :badge="cartCount" to='/home/cart'>
          购物车</van-tabbar-item>
           
        <van-tabbar-item icon="friends-o" @click="quit">退出</van-tabbar-item>
        
</van-tabbar>
    </div>
</template>
<script lang="ts">
import {defineComponent,getCurrentInstance,ref} from 'vue';
import { useStore } from 'vuex'
import { computed } from 'vue'
export default defineComponent({
    name:'bottom',
    setup(){
    const  active=ref(0);
    const store=useStore();
    
    let cartCount=ref(computed(()=>store.getters.getCartNum));
    
    const {proxy}:any =getCurrentInstance();
    /**
     * 退出操作
     * 1.清空token，
     * 2.跳转到login页面
     */
    function quit(){
        window.sessionStorage.setItem('token','');
        proxy.$router.replace('/login');
    }
    

      return{
          active,
          cartCount,
          quit,
          
      }
    }
})
</script>
<style scoped>
</style>